import request from '@/request.js'
import config from '@/config.js'

import axios from 'axios'

import envShow from '@/components/envShow/envShow.vue'

export default {
  name: 'mapOthers',
  components: {
    envShow
  },
  props: {
    // 地图详细数据
    // 需要双向绑定
    map: {
      type: Object,
      default: null
    },
    // 当前选中的地图块
    selectedItem: {
      type: Number,
      default: null
    },
  },
  data () {
    return {
      isLoading: false,
      // 功能选择
      functionSelected: '1',
      // 地图数据
      mapData: this.map,
      imageDefaultSize: 32,
      
      // 素材集
      preparations: {},
      
      // 添加环境
      addEnvModal: false,
      // 所有环境列表
      envData: null,
      // 选择环境列表
      envSelected: [],
      // 打开的环境
      envOpened: '', 
    }
  },
  computed: {
    envList () {
      return this.envData ? this.envData : []
    },
    
    preparationsList () {
      return (key) => {
        if (!this.preparations[key]) {
          return []
        }
        return this.preparations[key]
      }
    },
    
    envStyle () {
      return (env) => {      
        const colNum = env.colNum
        const minImageSize = this.imageDefaultSize
        let width = env.tilesWidth
        if (width < minImageSize) {
          width = minImageSize
        }
        return {
          width: (colNum * width + 20) + 'px'
        }
      }
    }
  },
  methods: {
    // 初始化准备好的素材集
    initPreparations () {
      if (!this.mapData) {
        // 加载失败也要赋值，因为此请求可能多次触发
        this.preparations = {}
        return
      }
      
      this.isLoading = true
      request.getMapPreparations(this.mapData.preparations).then((data) => {
        this.$Message.success({
          content: '更新素材集成功'
        })
        this.preparations = data
        this.isLoading = false
      })
      .catch((err) => {
        console.log(err)
        this.$Message.error({
          content: '更新素材集失败'
        })
        // 加载失败也要赋值，因为此请求可能多次触发
        this.preparations = {}
        this.isLoading = false
      })
    },
    
    // 更改重要数据时触发
    onChange (eventName = '') {
      this.$emit('on-change', this.mapData, this.selectedItem, eventName)
    },
    
    // 选取资源对象时触发
    selectedHandler (obj) {
      // 清空其他选取资源组件的选择情况
      this.$emit('on-selected', obj)
    },
    
    // 点击环境添加的触发
    addEnvHandler () {
      this.envSelected = this.getPreparationsSelected('env')
      if (!this.envData) {
        request.getEnv().then((data) => {
          this.$Notice.success({
            title: '获取环境列表成功'
          })
          this.envData = data
          this.addEnvModal = true
        })
        .catch((err) => {
          console.log(err)
          this.$Notice.error({
            title: '获取环境列表失败'
          })
        })
      }
      else {
        this.addEnvModal = true
      }
    },
    
    getPreparationsSelected (key) {
      if (!this.mapData.preparations || !this.mapData.preparations[key]) {
        return []
      }

      return this.mapData.preparations[key]
    },
    
    // 添加素材
    addPreparation (key, modal) {
      if (!this.mapData.preparations) {
        this.mapData.preparations = {}
      }
      
      if (!this.mapData.preparations[key]) {
        this.mapData.preparations[key] = []
      }
      
      this.mapData.preparations[key] = this.envSelected
      // mapData改变了，触发on-change
      this.onChange('set')
      
      modal = false
      // 重新加载预备资源
      this.initPreparations()
    }
  },
  watch: {
    map: {
      handler (newVal, oldVal) {
        if ((newVal && !oldVal) || (!newVal && oldVal) ||
          (newVal && oldVal && newVal.id !== oldVal.id)) {
          // 打开的地图被切换，重新加载预备资源
          this.mapData = newVal
          this.initPreparations()
        }
        else {
          this.mapData = newVal
        }
      },
      deep: true
    } 
  }
}